<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column
        label="ID"
        prop="id"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column label="商户名" prop="shop_name" align="center" width="160" />
      <el-table-column label="真实姓名" prop="real_name" align="center" width="200" />
      <el-table-column label="商户联系方式" prop="contact" align="center" width="200" />
      <el-table-column label="提现金额" prop="amount" align="center" width="200" />
      <!-- <el-table-column label="理由" prop="info" align="center" width="200" /> -->
      <el-table-column label="申请时间" prop="create_time" align="center" width="200" />
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="updateStatus(scope.row, 2)" type="danger" size="small">拒绝</el-button>
          <el-button @click="updateStatus(scope.row, 1)" type="success" size="small">同意</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { list, put } from '@/api/trans'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import vSearch from '@/components/Search'

export default {
  components: {
    Pagination,
    vSearch
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-id',
        where: [
          { field: 'status', op: 'eq', value: 1 }
        ]
      },
      downloadLoading: false,
      importanceOptions: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // flag 2拒绝 1同意
    updateStatus(item, flag) {
      const ti = flag === 2 ? '拒绝' : '同意'
      this.$prompt(`是否继续执行 ${ti}退款 操作？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then((value) => {
        console.log(value)
        if (!value.value) {
          this.$message.error('请填写理由')
        } else {
          this.$store.commit('SHOW_LOADING')
          put({
            id: item.id,
            type: flag,
            info: value.value
          }).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.list.splice(this.list.findIndex(c => c.id === item.id), 1)
            this.$store.commit('HIDE_LOADING')
          })
          /* deleted(item.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.list.splice(this.list.findIndex(c => c.id === item.id), 1)
            this.$store.commit('HIDE_LOADING')
          }) */
        }
      })
      console.log(item)
    }
  }
}
</script>
